<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      emits 选项

        概念：声明组件会触发的自定义事件的列表

        语法：
            1. 数组语法
              emits: ['abcd', 'efdl']
            2. 对象语法
              emits: {
                abcd(payload) {
                  // payload 是事件参数
                  // 返回一个 boolean 值来对自定义事件的参数做校验
                },

                efdl(payload) {
                  // payload 是事件参数
                  // 返回一个 boolean 值来对自定义事件的参数做校验
                }
              }

        没有声明 emits 时,可能会出现的bug
            现象: 父组件监听的自定义事件所设置的事件处理函数会被执行多次.
            原因:
              自定义事件的名字如果根普通事件的名字有重合时就会出现问题,
              第一次触发的是自定义事件
              第二次触发的是原生事件
            深层原因:
              了解到 透传Attribulte [TODO]
            

     -->

    <div id="app">
      <Hello @abcd="handleAbcd" @click="handleClick"></Hello>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        methods: {
          handleAbcd() {
            console.log("handleAbcd");
          },

          handleClick(event) {
            console.log("handleClick", event);
          },
        },
      });

      app.component("Hello", {
        // emits: ["abcd", "click"],
        // emits: {
        //   abcd(payload) {
        //     console.log("校验abcd事件", payload);
        //     return false; // 校验失败

        //     // return true; // 校验成功
        //   },
        // },

        template: `
          <div>
            <h2>Hello</h2>  
            <button @click="$emit('abcd', '张三')">触发自定义事件 abcd</button>
            <button @click="$emit('click', '里斯')">触发自定义事件 click</button>
          </div>
        `,
      });

      app.mount("#app");
    </script>
  </body>
</html>
